<template>
  <div id="statisticManage">
    <div style="width: 100%;height: 100px;display: flex;align-items: center">
      <el-date-picker
              v-model="dateRange"
              @change="getDateRange"
              value-format="yyyy-MM-dd">
      </el-date-picker>
      <el-switch
              style="display: block;margin-left: 20px"
              v-model="value"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="student"
              @change="changeRole"
              inactive-text="teacher">
      </el-switch>
    </div>

    <div style="display: flex">
      <div id="bar"></div>
      <div id="tie"></div>
    </div>

  </div>
</template>

<script>
  import * as echarts from 'echarts';
  import {format_today2} from "../checkedRecord/childCpn/utils";

  export default {
    name: "StatisticManagement",
    data(){
      return{
        formData:{startTime:'',endTime:'',role:''},
        dateRange:'',
        value:'',
        myChart : ''
      }
    },
    mounted() {

      let mainContainer =document.getElementById('bar');
      this.myChart = echarts.init(mainContainer);
      let mainContainer2 =document.getElementById('tie');
      this.myChart2 = echarts.init(mainContainer2);

      this.formData.startTime = format_today2
      this.formData.endTime = format_today2
      this.dateRange = format_today2
      this.getTemperature()
      this.getDepartment()

      this.myChart.setOption({
        legend:{
          data:['未打卡人数','打卡人数','总人数']
        },
        grid:{
          right:50
        },
        title: {
          text: '打卡数据分析'
        },
        xAxis:{
          data:[]
        },
        yAxis:{
          // data:[5,10,15,20,25,30]
        },
        series: [{
          name: '未打卡率',
          type: 'pie',
          center:['85%',60],
          radius : 35,
          data: []
        },
          {
            name: '未打卡人数',
            type: 'bar',
            data: [],
            color: ['#0e658e','#0535ee'],
          },
          {
            name: '打卡人数',
            type: 'bar',
            data: [],
            color: ['#FF8040','#757ea0'],
          },
          {
            name: '总人数',
            type: 'line',
            data: []
          }]
      })

      this.myChart2.setOption({
        title: {
          text: '体温分析'
        },
        series: [{
          name: '体温',
          type: 'pie',
          center:['50%',90],
          radius : 80,
          data: []
        }]
      })
    },
    methods:{
      getTemperature(){
        this.$http.post('/epidemic/admin/getTAnalysis',this.formData).then(res => {
          console.log(res.data.data)
          this.myChart2.setOption({
            series: [{
              // 根据名字对应到相应的系列
              name: '体温',
              data: res.data.data
            }]
          })
        })
      },
      getDepartment(){
        this.$http.post('/epidemic/admin/getDepartmentAnalysis',this.formData).then(res => {
          let rowData = []
          let notReportNum = []
          let reportNum = []
          let sumNum = []
          let notReport = []
          for (let item of res.data.data)
          {
            rowData.push(item.departmentName)
            notReportNum.push(item.notRepoetNum)
            reportNum.push(item.userNum - item.notRepoetNum)
            sumNum.push(item.userNum)
            notReport.push({name:item.departmentName,value:item['未打卡率'].slice(1,-3)})
          }
          // this.myChart2.setOption({
          //   series:[]
          // })
          this.myChart.setOption({
            xAxis : {
              data:rowData
            },
            series: [{
              // 根据名字对应到相应的系列
              name: '未打卡率',
              data: notReport
            },{
              // 根据名字对应到相应的系列
              name: '未打卡人数',
              data: notReportNum
            },
              {
                // 根据名字对应到相应的系列
                name: '打卡人数',
                data: reportNum
              },
              {
                // 根据名字对应到相应的系列
                name: '总人数',
                data: sumNum
              }]
          })
          console.log(res)
          console.log(notReport)
        })
      },
      getDateRange(){
        this.formData.startTime = this.dateRange
        this.formData.endTime = this.dateRange
        console.log(this.formData)
        this.getTemperature()
        this.getDepartment()
      },
      changeRole(){
        if(this.value === true){
          this.formData.role = 'Student'
        }
        else{
          this.formData.role = 'Teacher'
        }
        this.getDepartment()
        this.getTemperature()
      }
    }
  }
</script>

<style scoped>
#statisticManage{
  width: 100%;
  height: 100%;
}
#bar{
  width: 800px;
  height: 550px;
}
  #tie{
    margin-top: 200px;
    /*margin-left: 50px;*/
    width: 400px;
    height:350px;
  }
</style>